<template>
  <view>
    <uv-navbar
      title="添加人员"
      placeholder
      bg-color="#fff"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    >
      <template #right>
        <uv-text text="保存" color="#4EA770" size="28rpx" @click="handleSave" />
      </template>
    </uv-navbar>
    <uv-sticky bg-color="#f9f9f9">
      <uv-search
        v-model="searchText"
        class="ss-p-x-26 ss-p-y-20"
        :show-action="false"
        placeholder="请输入用户名称"
        animation
        clearabled
      />
    </uv-sticky>
    <view class="person-box">
      <uv-checkbox-group
        v-model="checked"
        border-bottom
        placement="column"
        shape="circle"
        active-color="#4EA770"
        size="40rpx"
        icon-size="40rpx"
      >
        <uv-checkbox
          :customStyle="{ marginBottom: '8px' }"
          v-for="item in dataList"
          :key="item.userId"
          :name="item.userId"
          :disabled="item.userId == createBy"
        >
          <view class="row">
            <uv-avatar :src="webSrc(item.avatar)" size="80rpx" />
            <view class="title"> {{ item.nickName }}</view>
            <view class="tag">{{ enumUserType(item.userType) }}</view>
          </view>
        </uv-checkbox>
      </uv-checkbox-group>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { webSrc, enumUserType } from "@/common/mothed.js";
import { getOrderUserList } from "@/request/order";

const orderId = ref(""); // 订单id
const createBy = ref(0); // 创建人id
const searchText = ref(""); // 搜索内容
const checked = ref([]); // 选中人员列表
const oldList = ref([]); // 人员列表

// 过滤后的列表
const dataList = computed(() => {
  return oldList.value.filter((item) => item.nickName.indexOf(searchText.value) != -1);
});

onLoad((e) => {
  orderId.value = e.orderId;
  createBy.value = parseInt(e.createBy || "0");
  getList();
});

onPullDownRefresh(() => {
  getList();
});

onShow(() => {
  let list = uni.getStorageSync("choosePerson");
  if (list) checked.value = list;
});

// 获取人员列表
const getList = () => {
  getOrderUserList(orderId.value)
    .then((res) => {
      if (res.code == 200) {
        oldList.value = res.data;
      }
    })
    .finally(() => {
      uni.stopPullDownRefresh();
    });
};

// 保存选中人员
const handleSave = () => {
  uni.setStorageSync("choosePerson", checked.value);
  uni.navigateBack({
    delta: 1,
  });
};
</script>
<style lang="scss" scoped>
.person-box {
  padding: 20rpx 40rpx;

  .row {
    display: flex;
    align-items: center;
    height: 80rpx;

    .title {
      font-size: 28rpx;
      color: #333;
      max-width: 260rpx;
      margin-left: 20rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .tag {
      background-color: #bdbdbd;
      color: #fff;
      padding: 4rpx 16rpx;
      font-size: 24rpx;
      border-radius: 8rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
